<template>
    <div class="password">
        <van-nav-bar title="找回交易密码" left-arrow @click-left="goBack"></van-nav-bar>
        <div class="content">
            <section>
                <van-field v-model="newPassword" label="交易密码" placeholder="密码由6位数字组成" />
                <van-field v-model="confirmPassword " label="确认新密码" placeholder="请再次输入新密码" />
                <div class="verify-info verify-code">
                    <label for="code">验证码</label>
                    <input type="number" v-model="code" id="code" value="" placeholder="请输入验证码" class="msm-code">
                    <button class="codetxt" type="button" :disabled="disabled" @click="sendcode">{{btntxt}}</button>
                </div>
            </section>
            <div class="login-out">
                <button type="submit" class="submit-btn" @click="modifyPassword">确认</button>
            </div>
        </div>
    </div>
</template>
<script>
import Vue from "vue"
import axios from "axios"
import {
    updatePassword,
    getVerificationCode
} from "../../../axios/api.js"
import {
    NavBar,
    Field,
    Toast,
} from "vant"
export default {
    components: {
        [NavBar.name]: NavBar,
        [Field.name]: Field,
        [Toast.name]: Toast,
    },
    data() {
        return {
            token: "",
            newPassword: "",
            confirmPassword: "",
            code: "",
            btntxt: "发送验证码",
            disabled: false,
            time: 0
        }
    },
    methods: {
        //返回上一页
        goBack() {
            this.$router.go(-1);
        },
        //发送手机短信验证码
        sendcode() {
            this.time = 60;
            this.disabled = true;
            //验证码的时间设置
            this.timer();
            //手机号调取后端接口
            getVerificationCode().then(res => {
                console.log(res.data)
                    if (res.status != 200) {
                        this.$toast("网络错误");
                    } else if (res.status == 200) {
                        if (res.data.error == null && res.data.result == true) {
                            this.$toast("请注意接收验证码");
                        } else if (res.data.error != null && res.data.result == null) {
                            this.$toast( res.data.msg);
                        }
                    }
                }).catch(function(err) {
                    console.log(err);
                });
	    },
        //验证码的倒计时
        timer() {
            if (this.time > 0) {
                this.time--;
                this.btntxt = this.time + "s后获取";
                setTimeout(this.timer, 1000);
            } else {
                this.time = 0;
                this.btntxt = "获取验证码";
                this.disabled = false;
            }
        },
        //找回交易密码
        modifyPassword() {
            let modifyPassword = new FormData();
            modifyPassword.append("token",this.$store.state.token);
            modifyPassword.append("newPassword",this.newPassword);
            modifyPassword.append("confirmPassword",this.confirmPassword);
            modifyPassword.append("verificationCode",this.code);
            modifyPassword.append("type","1");
            modifyPassword.append("passwordType","1");
            axios.defaults.headers.Authorization = this.$store.state.token;
            updatePassword(modifyPassword).then(res => {
                console.log(res)
                if (res.data.code != 200) {
                    this.$toast(res.data.msg);
                }else {
                    this.$toast(res.data.msg);
                    this.$router.push({name: "passwordSetting"});
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import "../../../assets/less/variable.less";
/deep/.van-cell__title {
    text-align: left;
}
/deep/.van-cell::after {
    content: ' ';
    position: absolute;
    pointer-events: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    border-bottom: 1px solid #ebedf0;
}
.password {
    background: #fff;
    .content {
        background: #fff;
        .verify-info {
            width: 100%;
            box-sizing: border-box;
            line-height: 24px;
            background-color: #fff;
            border-bottom: 1px solid #ebedf0;
            color: #323233;
            font-size: 14px;
            & > input {
                display: flex;
                padding: 10px 33px;
                width: 91%;
                border: 0;
            }
        }
        .verify-code {
            display: inline-flex;
            label {
                padding: 10px 15px;
            }
            .msm-code {
                flex: 1;
            }
            .codetxt {
                padding: 10px 15px;
                border: 0;
                background: #fff;
                outline: none;
                color: #ff976a;
            }
        }
        .login-out {
            margin-top: .67rem;
            width: 100%;
            background-color: #fff;
            color: #fff;
            font-size: @base_textSize;
            .submit-btn {
                padding: 10px;
                width: 90%;
                height: 1.07rem;
                border: 0;
                border-radius: 3px;
                background: #ff976a;
                outline: none;
            }
        }
    }
}
</style>